<script setup lang="ts">
import { Swiper, SwiperSlide } from "swiper/vue";

const links = [
  { name: "立即购买", key: "buyHref" },
  { name: "了解详情", key: "detailHref" },
];

const list = [
  {
    alt: "",
    src: "https://static.smarbox.cn/cinmoore/images/bc6v-pc/P1.png",
    mobileSrc: "https://static.smarbox.cn/cinmoore/images/bc6v/p1.png",

    detailHref: "/detail/bc6v",
    buyHref: "http://item.m.jd.com/product/100291792524",
  },
];
</script>

<template>
  <ClientOnly>
    <Swiper loop>
      <SwiperSlide v-for="(item, index) in list" :key="index">
        <div class="relative block">
          <img class="w-full max-md:hidden" :src="item.src" />
          <img class="w-full md:hidden" :src="item.mobileSrc" />

          <div
            class="absolute max-md:top-69vw md:bottom-35% max-md:left-0 left-13vw flex justify-center max-md:left-0 max-md:w-full"
          >
            <a
              v-for="(link, index) in links"
              :key="index"
              :href="item[link.key]"
              class="banner-enter py-1.5 md:py-1 px-7 flex-center mx-1vw max-mx-3.5 max-md:text-2.6vw md:text-[clamp(10px,1.5vw,20px)]"
            >
              <span class="">
                {{ link.name }}
                <span class="pl-2">></span>
              </span>
            </a>
          </div>
        </div>
      </SwiperSlide>
    </Swiper>
  </ClientOnly>
</template>

<style lang="less">
.banner-enter {
  position: relative;
  overflow: hidden;
  text-align: center;
  border-radius: 90px;
  border: 1px solid rgba(66, 66, 66, 1);
  color: #fff;
  // background: linear-gradient(
  //   to right,
  //   rgba(255, 255, 255, 1),
  //   rgba(255, 255, 255, 0)
  // );
  // background-size: 0% 100%; /* 初始宽度为 0 */
  // background-repeat: no-repeat;
  background: #333;

  &:hover {
    animation: fill 500ms ease-in-out forwards;
  }
  &:not(:hover) {
    animation: reverseFill 0.5s ease-in-out forwards;
  }

  & > span {
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
  }
}

@keyframes fill {
  0% {
    background-size: 0% 100%; /* 初始状态：无填充 */
  }
  100% {
    background-size: 100% 100%; /* 最终状态：完全填充 */
  }
}

@keyframes reverseFill {
  0% {
    background-size: 100% 100%;
  }
  100% {
    background-size: 0% 100%;
  }
}
</style>
